import React, { lazy } from "react";
import { Navigate } from "react-router-dom";

import Login from '@/views/Login'
const Home = lazy(() => import("@/views/Home"))
const About = lazy(() => import("@/views/About"))
const Page1 = lazy(() => import("@/views/Page1"))
const Page2 = lazy(() => import("@/views/Page2"))

const withLoadingComponent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
)

export default [
    {
        path: '/',
        element: <Navigate to="/page1" />
    },
    {
        path: '/',
        element: withLoadingComponent(<Home />),
        children: [
            {
                path: '/page1',
                element: withLoadingComponent(<Page1 />)
            },
            {
                path: '/page2',
                element: withLoadingComponent(<Page2 />)
            },
            {
                path: '/about/page1',
                element: withLoadingComponent(<About />)
            }
        ]
    }, {
        path: '/login',
        element: <Login />
    },
    {  // 重定向
        path: '*',
        element: <Navigate to="/page1" />
    },
]